<%--
  Created by IntelliJ IDEA.
  User: DongZhengWei
  Date: 2018/11/27
  Time: 10:51
  个人中心
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<style>
	/*个人资料*/
	#editLogo{
		position: absolute;
		margin:auto;
		top: 0;
		left: 0;
		width: 96px;
		height: 96px;
		padding-top: 40px;
		text-align: center;
		vertical-align:middle;
		background-color: rgba(0,0,0,0.3);
		color: #FFF;
		cursor: pointer;
		opacity: 0;
	}
	#editLogo:hover{
		opacity: 1;
	}
	#logoContainer{
		position: relative;
		width: 96px;
		height: 96px;
		margin: 0 auto;
		overflow: hidden;
	}

	/*账号绑定*/
	#center-tab-account .well{
		line-height: 38px;
		font-size: 18px;
	}

</style>

<div id="page-content">
	<div class="panel">
		<div class="panel-heading">
			<h3 class="panel-title">个人中心</h3>
		</div>
	</div>

	<div class="tab-base tab-stacked-left">

		<!--Nav tabs-->
		<ul class="nav nav-tabs" style="width: 13%">
			<li class="active">
				<a data-toggle="tab" href="#center-tab-user" aria-expanded="true">个人资料</a>
			</li>
			<li class="">
				<a data-toggle="tab" href="#center-tab-account" aria-expanded="false">账号绑定</a>
			</li>
			<li class="">
				<a data-toggle="tab" href="#center-tab-password" aria-expanded="false">修改密码</a>
			</li>
			<li class="">
				<a data-toggle="tab" href="#center-tab-duty" aria-expanded="false">我的职责</a>
			</li>
		</ul>

		<!--Tabs Content-->
		<div class="tab-content" style="padding: 0">

			<!-- 个人资料 START -->
			<div id="center-tab-user" class="tab-pane fade active in">
				<div class="panel-body">
					<form id="form_center_user" class="form-horizontal">
						<input type="hidden" id="userId" name="userId" value="${user.id}" />
						<input type="hidden" id="headFileId" name="headFileId" value="${user.headFileId}" />

						<div class="form-group">
							<div class="col-md-6 col-md-offset-3 text-center">
								<div id="logoContainer" class="img-circle">
									<img id="userHeadImg" alt="${user.name}" class="img-lg" src="${userHeadUrl}">
									<div id="editLogo">修改图片</div>
								</div>
							</div>
						</div>

						<div class="form-group">
							<label class="col-md-3 control-label">姓名</label>
							<div class="col-md-6">
								<input disabled type="text" placeholder="姓名" class="form-control" id="name" name="name" value="${user.name}">
							</div>
						</div>

						<div class="form-group">
							<label class="col-md-3 control-label">性别</label>
							<div class="col-md-6">
								<div class="radio">
									<input id="user-sex-male" class="magic-radio" type="radio" name="sex" value="male" <c:if test="${user.sex=='male'}">checked</c:if>>
									<label for="user-sex-male">男</label>
									<input id="user-sex-female" class="magic-radio" type="radio" name="sex" value="female" <c:if test="${user.sex=='female'}">checked</c:if>>
									<label for="user-sex-female">女</label>
								</div>
							</div>
						</div>

						<div class="form-group">
							<label class="col-md-3 control-label">生日</label>
							<div class="col-md-6">
								<input type="text" placeholder="请选择生日" class="form-control" id="birthday" name="birthday" value="<fmt:formatDate value="${user.birthday}" pattern="yyyy-MM-dd" />">
							</div>
						</div>

						<div class="form-group">
							<label class="col-md-3 control-label">地区</label>
							<div class="col-md-6" style="position: relative;">
								<input id="place" name="place" readonly type="text" data-toggle="city-picker" placeholder="点击从下拉面板中选择省/市/区">
							</div>
						</div>

						<div class="form-group">
							<label class="col-md-3 control-label">身份证号</label>
							<div class="col-md-6">
								<input type="text" placeholder="身份证号" class="form-control" id="cardId" name="cardId" value="${user.cardId}">
							</div>
						</div>

					</form>
				</div>
				<div class="panel-footer">
					<button id="btn-user-center-save" class="btn btn-primary pull-right pli-data-upload" type="button"> 保存</button>
				</div>
			</div>
			<!-- 个人资料 END -->

			<!-- 账号绑定 START -->
			<div id="center-tab-account" class="tab-pane fade">
				<div class="panel-body">

					<div class="well eq-height" id="well-username" data-title="用户名">
						<div class="col-md-1"><i class="pli-t-shirt icon-2x"></i></div>
						<div class="col-md-4 text-right">用户名：</div>
						<div class="col-md-7">
							<span>${admin.username}</span>
							<button class="btn btn-default btn-labeled psi-medal-2" onclick="account_change('username')">修改</button>
						</div>
					</div>
					<div class="well eq-height" id="well-userMobile" data-title="手机号">
						<div class="col-md-1"><i class="pli-smartphone-3 icon-2x"></i></div>
						<div class="col-md-4 text-right">手机号：</div>
						<div class="col-md-7">
							<span>${admin.userMobile}</span>
							<button class="btn btn-default btn-labeled psi-medal-2" onclick="account_change('userMobile')">修改</button>
						</div>
					</div>
					<div class="well eq-height" id="well-userEmail" data-title="邮箱">
						<div class="col-md-1"><i class="pli-mail-love icon-2x"></i></div>
						<div class="col-md-4 text-right">邮箱：</div>
						<div class="col-md-7">
							<span>${admin.userEmail}</span>
							<button class="btn btn-default btn-labeled psi-medal-2" onclick="account_change('userEmail')">修改</button>
						</div>
					</div>
					<div class="well eq-height" id="well-userWeiChat" data-title="微信">
						<div class="col-md-1"><i class="fa fa-wechat" style="font-size: 2em"></i></div>
						<div class="col-md-4 text-right">微信：</div>
						<div class="col-md-7">
							<span>_Monster</span>
							<button class="btn btn-default btn-labeled psi-medal-2" onclick="account_change('userWeiChat')">修改</button>
						</div>
					</div>

				</div>
			</div>
			<!-- 账号绑定 END -->

			<!-- 修改密码 START -->
			<div id="center-tab-password" class="tab-pane fade">
				<!-- Classic Form Wizard -->
				<!--===================================================-->
				<div id="wizard-update-password">

					<!--Nav-->
					<ul class="wz-nav-off wz-icon-inline">
						<li class="col-xs-4 bg-mint">
							<a data-toggle="tab" href="#cls-tab1">
								<span class="icon-wrap icon-wrap-xs bg-trans-dark"><i class="pli-safe-box icon-lg"></i></span> 原密码
							</a>
						</li>
						<li class="col-xs-4 bg-mint">
							<a data-toggle="tab" href="#cls-tab2">
								<span class="icon-wrap icon-wrap-xs bg-trans-dark"><i class="pli-pen-4 icon-lg"></i></span> 新密码
							</a>
						</li>
						<li class="col-xs-4 bg-mint">
							<a data-toggle="tab" href="#cls-tab3">
								<span class="icon-wrap icon-wrap-xs bg-trans-dark"><i class="pli-pawn icon-lg"></i></span> 完成
							</a>
						</li>
					</ul>

					<!--Progress bar-->
					<div class="progress progress-xs progress-striped active">
						<div class="progress-bar progress-bar-dark"></div>
					</div>


					<!--Form-->
					<form id="form_update_password" class="form-horizontal mar-top">
						<div class="panel-body">
							<div class="tab-content" style="display: block">

								<!--First tab-->
								<div id="cls-tab1" class="tab-pane">
									<div class="form-group">
										<label class="col-md-3 control-label">原密码</label>
										<div class="col-md-7">
											<input type="text" class="form-control" id="oldPassword" name="oldPassword" placeholder="请先输入当前密码">
										</div>
									</div>
								</div>

								<!--Second tab-->
								<div id="cls-tab2" class="tab-pane fade">
									<div class="form-group">
										<label class="col-lg-3 control-label">新密码</label>
										<div class="col-lg-7">
											<input type="password" id="newPassword" placeholder="请输入新密码" name="newPassword" class="form-control">
										</div>
									</div>
									<div class="form-group">
										<label class="col-lg-3 control-label">确认新密码</label>
										<div class="col-lg-7">
											<input type="password" id="newPassword2" placeholder="请再输入新密码" class="form-control">
										</div>
									</div>
								</div>

								<!--Fourth tab-->
								<div id="cls-tab3" class="tab-pane">
									<h4>修改成功</h4>
									<p>请牢记您的新密码</p>
								</div>
							</div>
						</div>


						<!--Footer button-->
						<div class="panel-footer text-right">
							<div class="box-inline">
								<button id="password-next" type="button" class="next btn btn-mint">下一步</button>
							</div>
						</div>
					</form>
				</div>
				<!--===================================================-->
				<!-- End Classic Form Wizard -->
			</div>
			<!-- 修改密码 END -->

			<!-- 我的职责 START -->
			<div id="center-tab-duty" class="tab-pane fade">
				<div class="panel-heading">
					<h3 class="panel-title">
						我的职责列表
						<a  id="duty-tip" title="" data-html="true" data-container="body" data-original-title="选中列表项设置主要职责" href="javascript:void(0)" class="psi-quill-3 icon-lg icon-fw unselectable text-info add-tooltip"></a>
						</h3>
				</div>
				<div class="panel-body">
					<div id="user-center-duty-main" class="list-group list-group-striped">
						<c:choose>
							<c:when test="${fn:length(dutyList)>0}">
								<c:forEach items="${dutyList}" var="duty" varStatus="index">
									<a id="${duty.id}" class="list-group-item <c:if test="${user.mainDuty==duty}">active</c:if>" href="javascript:void(0)">${duty.power.department.name} - ${duty.power.post.name}</a>
								</c:forEach>
							</c:when>
							<c:otherwise>
								<p class="text-center">当前没有任何职责</p>
							</c:otherwise>
						</c:choose>
					</div>
				</div>
			</div>
			<!-- 我的职责 END -->

		</div>
	</div>

</div>

<script>

	$(function(){
        fn_user_center_input_validate();
	});

	// ================================= 个人资料 ===================================

    //点击修改头像
    $("#editLogo").click(function(){
        __open_dialog_form("修改头像","<%=path%>/main/member/logoDialog?userId=${user.id}",function(dialogRef){
            var callback = function(data){
                if(data && data.state===1){
                    dialogRef.close();
                    $("#headFileId").val(data.data.id);
                    $("#userHeadImg").attr("src", "../main/file/download?keyId=" + data.data.id);
                }else{
                    dialogRef.enableButtons();
                }
            };
            fn_save_logo(callback);
        })
    });

    __datepicker_day("birthday", {
        startView : 2,
        endDate : new Date()
    });

    //省市联动选择
    $("#place").citypicker({
        province : "${user.province}",
        city : "${user.city}",
        district : "${user.county}"
    });

    //表单验证
	function fn_user_center_input_validate(){
        __init_validate("form_center_user", {
            rules : {
                cardId : {
	                checkCardId : true
                }
            }
        });
	}

    $.validator.addMethod("checkCardId", function(value, element, params){
        var checkCardID = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
        return this.optional(element) || (checkCardID.test(value));
    }, "请输入正确的身份证号");

    $("#btn-user-center-save").click(function(){
        __btn_loading($(this));
        if($('#form_center_user').valid()){
            __form_save("form_center_user", "<%=path%>/main/member/updateUserCenter", function(data){
                if(data.state === 1 && data.data){
                    $("#index-user-head").attr("src", data.data); //更新index页面的头像
                }
                __btn_reset($("#btn-user-center-save"));
            })
        }
    });


    // ================================= 账号绑定 ===================================

	//点击修改按钮
	function account_change(type){
	    if(type){
	        var typeName = $("#well-" + type).attr("data-title");
            __open_dialog_form("修改 " + typeName,"<%=path%>/main/member/member_account_change_dialog?type=" + type,function(dialogRef){
	            var callback = function(data){
	                if(data && data.state === 1){
	                    dialogRef.close();
	                    $("#well-" + type).find("span").text(data.data);
	                }else{
	                    dialogRef.enableButtons();
					}
	            };
	            fn_member_account_update(callback);
            });
	    }
	}

    // ================================= 密码修改 ===================================

    $("#form_update_password #oldPassword").focus(function(){
        $(this).attr("type", "password");
    });

    $('#wizard-update-password').bootstrapWizard({
        tabClass		: 'wz-classic',
        nextSelector	: '#password-next',
        // previousSelector	: '.previous',
        onTabClick: function(tab, navigation, index) {
            return false;
        },
        onInit : function(){
            $('#wizard-update-password').find('.finish').hide().prop('disabled', true);
        },
        onTabShow: function(tab, navigation, index) {
            var $total = navigation.find('li').length;
            var $current = index+1;
            var $percent = ($current/$total) * 100;
            var wdt = 100/$total;
            var lft = wdt*index;
            $('#wizard-update-password').find('.progress-bar').css({width:$percent+'%'});

            if($current===1){
                $('#password-next').text("下一步");
            }else if($current===2){
                $('#password-next').text("确认");
            }else{
                $('#password-next').hide();
            }
        },
        onNext : function(tab, navigation, index){

            if(index === 1){
	            var oldPassword = $("#form_update_password #oldPassword").val();
                __ajax_get("<%=path%>/main/member/validPassword", {oldPassword : oldPassword}, function(data){
                    if(data.state===1){
                        $('#wizard-update-password').bootstrapWizard('show', index);
                    }else{
                        __toastr_error("密码错误");
                    }
                })
            }

            if(index === 2){
                var newPassword = $("#form_update_password #newPassword").val();
                var newPassword2 = $("#form_update_password #newPassword2").val();
                if(newPassword && newPassword2 && newPassword===newPassword2){
                    __ajax_post("<%=path%>/main/member/updatePassword", {newPassword : newPassword}, function(data){
                        if(data.state===1){
                            $('#wizard-update-password').bootstrapWizard('show', index);
                        }else{
                            __toastr_error("修改失败");
                        }
                    })
                }else{
                    __toastr_error("两次密码输入不一致");
                }
            }

			return false;
        }
    });


    // ================================= 我的职责 ===================================


	$("#duty-tip").tooltip();

	//职责列表点击设置主要职责
	$("#user-center-duty-main").on("click", "a", function(){
	    var a = $(this);
	    var dutyId = a.attr("id");
	    if(!a.hasClass("active") && dutyId){
	        __ajax_post("<%=path%>/main/member/updateMainDuty", {dutyId : dutyId}, function(data){
	            if(data.state === 1){
                    $("#user-center-duty-main a").removeClass("active");
                    a.addClass("active");
	            }else{
	                __toastr_error("设置主要职责失败");
	            }
	        });
	    }
	});

</script>